<template>
  <div>
    <h1>机构管理</h1>
    <div>
      机构名称：<input type="text" placeholder="请输入机构名称" v-model="adc">
      机构简称：<input type="text" placeholder="请输入机构简称" v-model="abc">
      <button @click="ins">添加</button>

      <table>
        <tr>
          <td>机构名称</td>
          <td>机构简称</td>
          <td>修改</td>
          <td>删除</td>
        </tr>
        <tr v-for="acc in UserBranch">
          <td class="aadb" >{{acc.branchId}}</td>
          <td>{{acc.branchName}}</td>
          <td>{{acc.branchShortName}}</td>
          <td class="red" @click="edit(acc.branchId,acc.branchName,acc.branchShortName)">修改</td>
          <td class="red" @click="dell(acc.branchId)">删除</td>
        </tr>
      </table>

      <div id="box" ref="scref">
        <p class="p">修改信息</p>
        <p class="zfont2"><input type="text" v-model="temid"></p>
        <p class="zfont1">机构名称：<input type="text" v-model="tem"></p>
        <p class="zfont1">机构简称：<input type="text" v-model="tems"></p>
        <button @click="upda()" class="btn">修改</button>
        <button @click="ex()" class="btn">取消</button>
      </div>


    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import api from "@/router/axios.js";

selBranch();
let UserBranch = ref({});
function selBranch() {
  api({url:"/branch",method:"get"})
      .then(resp => {
        UserBranch.value = resp.data;
      })
}

function dell(da){
  api({
    url:"/dell",
    params:{"branchId":da}
  }).then(resp=>{
    alert("删除成功")
    selBranch();
  })
}

let adc = ref("");
let abc = ref("");

function ins(){
  api({
    url:"ins",
    params:{"branchName":adc.value,"branchShortName":abc.value}
  }).then(resp=>{
    alert("添加成功")
    selBranch();
  })
}

const scref=ref();
let temid = ref("");
let tem = ref("");
let tems = ref("");

function edit(id,name,sname){
  scref.value.style.display = "block";
  temid.value=id;
  tem.value=name;
  tems.value=sname;
}
function ex(){
  scref.value.style.display = "none";

}
function upda(id,name,sname){
  api({
    url:"edit",
    params:{"branchId":temid.value,"branchName":tem.value,"branchShortName":tems.value}
  }).then(resp=>{
    alert("修改成功")
    selBranch();
    scref.value.style.display = "none";
  })
}



</script>

<style scoped>
td{
  min-width: 100px;
}
.aadb{
  display: none;
}
.red:hover{
  color: red;
}


#box{
  width: 600px;
  height: 400px;
  background: #e7e7e7;
  position: fixed;
  left: 35%;
  top:10%;
  display: none;
}
.p{
  text-align: center;
  color: red;
  font-size: 20px;
}
.zfont1{
  margin-left: 20px;
}
.zfont2{
  display: none;
}
.btn{
  margin-left: 50px;
  width: 200px;
  height: 30px;
}
</style>